<template>
  <view :style="[{height:CustomBar + 'px'}]">
    <view class="bar" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
      <view class="action" @tap="BackPage" v-if="isBack">
        <u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
        <slot name="backText"></slot>
      </view>
      <view class="content">
        <slot name="content"></slot>
      </view>
      <slot name="right"></slot>
    </view>
    <image :src="bgImage" class="image" :style="[{height:CustomBar + 'px'}]"></image>
  </view>
</template>

<script>
export default {
  name: 'my-nav',
  props: {
    bgColor: {
      type: String,
      default: ''
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    },
  },
  computed: {
    style() {
      var StatusBar= this.StatusBar;
      var CustomBar= this.CustomBar;
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      return style
    }
  },
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar
    };
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.image{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 20000;
}
.bar {
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}
</style>
